<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		body {
		  background: #000524;
		  width: 100vw;
		  height: 100vh;
		  margin: 0;
		  overflow: hidden;
		}

		#wrapper {
		  padding-top: 20px;
		  background: #000524;
		  border: 1px solid #000;
		  box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.71);
		  <!-- max-width: 650px; -->
		  height:100%;
		  margin: 35px auto;
		}

		#chart-bar {
		  position: relative;
		  margin-top: -38px;
		}
	</style>

</head>
<body>
	<script th:src="@{/static/js/apexcharts.js}" type="text/javascript"></script>
	
	<div id="wrapper">
	  <div id="chart-area"></div>
	  <div id="chart-bar"></div>
	</div>
	<script>
		var data = generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {
		  min: 30,
		  max: 90
		});
		var options1 = {
		  chart: {
			id: "chart2",
			type: "area",
			height: 530,
			foreColor: "#ccc",
			toolbar: {
			  autoSelected: "pan",
			  show: false
			}
		  },
		  colors: ["#00BAEC"],
		  stroke: {
			width: 3
		  },
		  grid: {
			borderColor: "#555",
			yaxis: {
			  lines: {
				show: false
			  }
			}
		  },
		  dataLabels: {
			enabled: false
		  },
		  fill: {
			gradient: {
			  enabled: true,
			  opacityFrom: 0.55,
			  opacityTo: 0
			}
		  },
		  markers: {
			size: 5,
			colors: ["#000524"],
			strokeColor: "#00BAEC",
			strokeWidth: 3
		  },
		  series: [
			{
			  data: data
			}
		  ],
		  tooltip: {
			theme: "dark"
		  },
		  xaxis: {
			type: "datetime"
		  },
		  yaxis: {
			min: 0,
			tickAmount: 4
		  }
		};

		var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);

		chart1.render();

		var options2 = {
		  chart: {
			id: "chart1",
			height: 380,
			type: "bar",
			foreColor: "#ccc",
			brush: {
			  target: "chart2",
			  enabled: true
			},
			selection: {
			  fill: {
				color: "#fff",
				opacity: 0.4
			  },
			  xaxis: {
				min: new Date("27 Jul 2017 10:00:00").getTime(),
				max: new Date("14 Aug 2017 10:00:00").getTime()
			  }
			}
		  },
		  colors: ["#FF0080"],
		  series: [
			{
			  data: data
			}
		  ],
		  stroke: {
			width: 2
		  },
		  grid: {
			borderColor: "#444"
		  },
		  markers: {
			size: 0
		  },
		  xaxis: {
			type: "datetime",
			tooltip: {
			  enabled: false
			}
		  },
		  yaxis: {
			tickAmount: 2
		  }
		};

		var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);

		chart2.render();

		function generateDayWiseTimeSeries(baseval, count, yrange) {
		  var i = 0;
		  var series = [];
		  while (i < count) {
			var x = baseval;
			var y =
			  Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

			series.push([x, y]);
			baseval += 86400000;
			i++;
		  }
		  return series;
		}
	</script>
	<div style="text-align:center;clear:both;">
	</div>
</body>
</html>